<script setup lang="ts">
defineOptions({
  name: "GroupEmpty"
});
const isMain = defineModel("isMain");
const isView = defineModel("isView");
const isEmpty = defineModel("isEmpty");

function addGroup() {
  isView.value = true;
}
</script>

<template>
  <div v-show="!isMain && isEmpty" class="equip-wrap-common equip-group-empty">
    <div class="equip-group-empty-content">
      <img src="@/assets/images/groupEmpty.png" width="200px" height="200px" />
      <p>还没有建设巡检组</p>
      <p class="text-[18px] font-bold leading-[26px]">通过巡检组管理实时调整工单执行人</p>
      <p>建设巡检组，可通过调整组内成员，从而调整工单执行人</p>
      <px-button class="mt-[24px]" type="primary" @click="addGroup">新增巡检组</px-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.equip-group-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  &-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 400px;
    height: 350px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(0 0 0 / 80%);
  }
}
</style>
